<template>
  <app-container class="chart-container">
    <div class="chart-header">
      <h2>{{ chartData.title }}</h2>
    </div>
    <app-chatjs :options="chartOptions" />
  </app-container>
</template>

<script setup>
import { computed } from 'vue'

const chartData = {
  title: '不同攻击类型的事件数量',
  type: 'barChart',
  data: [
    { label: 'T1564.001', value: 1 },
    { label: 'T1078.003', value: 1 },
    { label: 'T1082', value: 1 },
    { label: 'T1059', value: 4 },
    { label: 'T1027.001', value: 1 },
    { label: 'T1070.002', value: 1 },
  ],
}

const chartOptions = computed(() => ({
  type: 'bar',
  data: {
    labels: chartData.data.map(item => item.label),
    datasets: [
      {
        label: '事件数量',
        data: chartData.data.map(item => item.value),
        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#F7DC6F'],
        borderColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#F7DC6F'],
        borderWidth: 1,
      },
    ],
  },
  options: {
    scales: {
      y: {
        beginAtZero: true,
      },
    },
    plugins: {
      legend: {
        labels: {
          fontColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  },
}))
</script>

<style scoped>
.chart-container {
  padding: 2rem;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.chart-header h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #333;
}
</style>
